<template>
    <div class="mycrowd">
           <el-tabs v-model="activeName">
    <el-tab-pane label="您所发起的众筹项目" name="first">
       <div class="join_warp" v-if="isshow">
           <h3>众筹项目</h3>
            <table class="join">
                <thead>
                    <tr>
                        <th style="width:300px">名称</th>
                        <th style="width:100px">所筹金额</th>
                        <th style="width:200px">众筹结束时间</th>
                        <th style="width:200px">最迟发货时间</th>
                        <th style="width:200px">项目状态</th>
                    </tr>
                </thead>
                <tbody>
                        <tr v-for="(val,ind) in result" :key="ind">
                            <td>{{val.c_name}}</td>
                            <td>{{val.c_choubei}}</td>
                            <td>{{val.c_day}}</td>
                            <td>{{val.c_fhtime}}</td>
                            <td>{{val.status}}</td>
                        </tr>
                </tbody>
            </table>
             </div>
             <div class="wu" v-if="!isshow">
                 <p>您还没有发起任何众筹活动</p>
             </div>
    </el-tab-pane>
    <el-tab-pane label="您所支持的众筹项目" name="second">
        
        <div v-if="zhichi">
             <h3>参与的众筹项目</h3>
            <table class="join">
                <thead>
                    <tr>
                        <th style="width:160px">产品图片</th>
                        <th style="width:150px">名称</th>
                        <th style="width:100px">数量</th>
                        <th style="width:100px">总金额</th>
                        <th style="width:200px">最迟发货时间</th>
                        <th style="width:200px">收货地址</th>

                        <th style="width:200px">所处阶段</th>
                    </tr>
                </thead>
                <tbody>
                        <tr v-for="(val,ind) in result1" :key="ind">
                            <td><img :src="val.cc_img"/></td>
                            <td>{{val.cc_name}}</td>
                            <td>{{val.cc_num}}</td>
                            <td>{{val.cc_price}}</td>
                            <td>{{val.cc_time}}</td>
                            <td>{{val.cc_address}}</td>
                            <td v-if="val.status1&&!val.status2" class="td">{{val.status}}{{status1}}{{status2}}</td>
                            <td v-if="!val.status1&&!val.status2" class="td td1" @click="change1(val.cc_id,val.cc_status)">{{val.status}}{{status1}}{{status2}}</td>
                            <td v-if="val.status2&&!val.status1" class="td td1" @click="change2(val.cc_id,val.cc_status,val.c_id)">{{val.status}}{{status1}}{{status2}}</td>
                            <td v-if="val.status2&&val.status1" class="td">{{val.status}}{{status1}}{{status2}}</td>

                        </tr>
                </tbody>
            </table>
        </div>
        <div class="wu" v-if="!zhichi">
                 <p>您还没有支持任何众筹活动</p>
             </div>
    </el-tab-pane>
    <el-tab-pane label="您所发布众筹项目的支持者" name="three">
        <div class="wu" v-if="!isshow">
                 <p>您还没有发起任何众筹活动</p>
             </div>
            <div v-if="isshow" class="chaya">
 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="商品名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getStatus">查询</el-button>
				</el-form-item>
			</el-form>
    </el-col>
     <el-table :data="cartcrowd" highlight-current-row v-loading="listLoading" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
            <el-table-column prop="cc_id" label="订单编号" width="60" sortable>
			</el-table-column>
            <el-table-column prop="cc_img" label="商品图片" min-width="120" sortable>
                 <!-- 图片的显示 -->
                 <template   slot-scope="scope">            
                    <img :src="scope.row.cc_img"  min-width="80" height="80" />
                 </template>         

			</el-table-column>
			<el-table-column prop="cc_name" label="商品名称" width="120" sortable>
			</el-table-column>
			<el-table-column prop="cc_num" label="商品数量" width="60"  sortable>
			</el-table-column>
			<el-table-column prop="cc_price" label="商品总价" width="100" sortable>
			</el-table-column>
            <el-table-column prop="cc_day" label="最早发货时间" width="120" sortable>
			</el-table-column>
            <el-table-column prop="cc_time" label="最迟发货时间" width="120" sortable>
			</el-table-column>
            <el-table-column prop="u_name" label="收货人姓名" width="100" sortable>
			</el-table-column>
            <el-table-column prop="u_number" label="收货人电话" width="150" sortable>
			</el-table-column>
             <el-table-column prop="cc_address" label="收货地址" width="150" sortable>
			</el-table-column>
            <el-table-column label="状态管理" width="150" sortable>
	<template scope="scope">
        <span v-if="!scope.row.daystatus">众筹还在进行中</span>
        <span :class="scope.row.leia?'up':''"  @click="changestatus(scope.$index,scope.row)" style="cursor:pointer" v-if="scope.row.daystatus">{{scope.row.status}}</span>
    </template>
    </el-table-column>

			
		</el-table>
        <el-col :span="24">
			<el-pagination 
            layout="total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" 
            :page-size="pagesize"
            :current-page=1
            :total="total" 
            style="float:right;">
			</el-pagination>
		</el-col>
            </div>
    </el-tab-pane>
  </el-tabs>
    </div>
</template>

<script>
export default {
     inject:['reload'],
data () {
    return {
         activeName: 'first',
         isshow:"",
         result:"",
         arr:[],
         arr1:[],
         arr3:[],
         nowy:"",
         nowm:"",
         nowd:"",
         result1:"",
         zhichi:"",
         status1:"",
         status2:"",
         filters:{
             name:""
         },
         cartcrowd:[],
         listLoading:false,
         pagesize:10,
        total:0,
        size:6,
        page:1,
        leia:""

    }
},
created () {
   this.geren();
   this.getStatus();
   
  this.$axios.post("http://127.0.0.1:8081/client/viewcrowd",{
      cu_id:sessionStorage.getItem("userid")
  }).then(res=>
  {
      if(res.data.status==0)
      {
          this.isshow=false;
      }
      else{
          this.isshow=true;
          this.result=res.data.result
      }
      let data=(new Date()).getTime();
      for(let i=0;i<this.result.length;i++){

          let c_day=this.result[i].c_day.replace(/-/g,'/');
          c_day= (new Date(c_day)).getTime();
           let c_fhtime=this.result[i].c_fhtime.replace(/-/g,'/');
          c_fhtime= (new Date(c_fhtime)).getTime();
          console.log(this.result[i])
          if(this.result[i].c_status==0)
          {
             this.result[i].status="审核中"
          }
         else{
             if(data<parseInt(this.result[i].startday))
         {
             this.result[i].status="审核通过"
         }
         else if(data<c_day&&data>parseInt(this.result[i].startday))
          {
              this.result[i].status="众筹中";
          }
          else if(data>c_day&&data<c_fhtime)
          {
              this.result[i].status="请准备发货"
          }
          else{
                this.result[i].status="项目已完成"
          }
         }
          
        //   console.log(this.result)
      }
      console.log(data)
    //   this.nowy=data.getFullYear();
    //   this.nowm=data.getMonth()+1;
    //   this.nowd=data.getDate();
    //   for(let i=0;i<this.result.length;i++)
    //   {
    //     //   let arr2=arr1.push(1);
    //    this.arr1.push(this.result[i].c_day.split("-"));
    //    this.arr3.push(this.result[i].c_fhtime.split("-"));
    //     // console.log(this.arr1,this.arr3)
    //   }
    //           console.log(this.nowy,this.nowm,this.nowd)
    //     for(let j=0;j<this.result.length;j++)
    //     {
    //         if(this.no)
    //     }
       
  })
  
},
methods: {
    change1(id,status)
    {
          this.$confirm('确认收货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log(id,status)
         this.$axios.post("http://127.0.0.1:8081/client/upstatus",{cc_id:id,cc_status:status}).then(res=>
         {
            console.log(res.data)
             this.reload();
         })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    change2(cc_id,status,c_id)
    {
         this.$prompt('请输入评论', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        //   inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        //   inputErrorMessage: '邮箱格式不正确'
        }).then(({value}) => {
            if(value.length<5)
            {
               this.$message({
            type: 'info',
            message:"评论不能少于五个字"
          }); 
            }
        else{
             this.$axios.post("http://127.0.0.1:8081/client/addcomment",{
             c_id:c_id,
             u_id:sessionStorage.getItem("userid"),
             u_name:sessionStorage.getItem("username"),
             pl_comment:value,
             pl_sex:sessionStorage.getItem("usersex")
         }).then(res=>
         {
             console.log(res)
             if(res.data.status=="success")
             {
                  this.$axios.post("http://127.0.0.1:8081/client/upstatus",{cc_id:cc_id,cc_status:status}).then(res=>
         {
            console.log(res.data)
             this.reload();
         })
               this.$message({
            type: res.data.status,
            message: res.data.msg
          });   
             }
             else{
                  this.$message({
            type: res.data.status,
            message: res.data.msg
          });   
             }
         })
        }
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    getStatus()
    {
        // console.log(this.filters.name);
        
        let para = {
					page: this.page,
                    limit:this.pagesize,
                    name:this.filters.name,
                    cu_id:sessionStorage.getItem("userid")
                };
                this.listLoading = true;
        this.$axios.post("http://127.0.0.1:8081/client/cartcrowd",para)
        .then(res=>
        {
            // console.log(res.data)
            for(let i=0;i<res.data.data.length;i++)
            {
            //   console.log("data",Date.parse(res.data.data[i].c_day.replace(/-/g,'/')))
                // console.log(res.data.data[i].cc_status);
                let data=(new Date()).getTime();
                let c_day=res.data.data[i].c_day.replace(/-/g,'/');
          c_day= (new Date(c_day)).getTime();
           let c_fhtime=res.data.data[i].c_fhtime.replace(/-/g,'/');
          c_fhtime= (new Date(c_fhtime)).getTime();
        //   console.log(data);
        //   console.log(c_day);
        //   console.log(c_fhtime);
          if(data<c_day)
          {
              res.data.data[i].daystatus=false;
          }
          else
          {
              res.data.data[i].daystatus=true;
          }
                 if(res.data.data[i].cc_status==0)
               {
                   res.data.data[i].leia=true;
                   res.data.data[i].status="未发货,点击发货";
               }
               else if(res.data.data[i].cc_status==1)
               {
                   res.data.data[i].leia=false;
                   res.data.data[i].status="已发货";
               }
               else if(res.data.data[i].cc_status==2)
               {
                   res.data.data[i].leia=false;                
                res.data.data[i].status="已收货";
               }
               else if(res.data.data[i].cc_status==3)
               {
                   res.data.data[i].leia=false;
                   res.data.data[i].status="已评价";
               }
            }
            this.cartcrowd=res.data.data;
            this.total=res.data.count
            // console.log(this.total)
            this.listLoading = false;
            // // console.log(res.data.data);
            //  console.log("cartcrowd",this.cartcrowd);
        })
    },
    changestatus(index,row)
    {
        if(row.cc_status==0)
        {
             this.$confirm('确定发货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              this.$axios.post("http://127.0.0.1:8081/client/upstatus",{
        cc_id:row.cc_id,
        cc_status:row.cc_status
    }).then(res=>
    {
          this.listLoading=false;
       this.getStatus();
        this.$message({
            type: 'success',
            message: '发货成功'
          }); 
    })
        //   this.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        }
        else{
            this.$message({
            type: 'warning',
            message: '您只能进行发货操作'
          }); 
        }
        console.log(index,row)
    },
    handleCurrentChange(val)
    {
        // console.log("val",val);
        this.page = val;
		this.getUsers();
    },
    handleSizeChange(val)
    {
        this.page = val;
		this.getUsers();
    },
    geren()
    {
         this.$axios.post("http://127.0.0.1:8081/client/payed",{
        cu_id:sessionStorage.getItem("userid")
    }).then(res=>
    {
         if(res.data.status==0)
      {
          this.zhichi=false;
      }
      else{
          this.zhichi=true;
          this.result1=res.data.result;
           for(let i=0;i<this.result1.length;i++){
               if(this.result1[i].cc_status==0)
               {
                   this.result1[i].status="未发货";
                   this.result1[i].status1=true;
                   this.result1[i].status2=false;
                   console.log("0",this.status1,this.status2)
               }
               else if(this.result1[i].cc_status==1)
               {
                  this.result1[i].status1=false;
                   this.result1[i].status2=false;
                   this.result1[i].status="已发货，点击确认收货";
                   
                   console.log("1",this.status1,this.status2)
               }
               else if(this.result1[i].cc_status==2)
               {
                   this.result1[i].status="已收货，点击评价";
                     this.result1[i].status1=false;
                   this.result1[i].status2=true;
                   console.log("2",this.status1,this.status2)
               }
               else if(this.result1[i].cc_status==3)
               {
                   this.result1[i].status="已评价";
                     this.result1[i].status1=true;
                   this.result1[i].status2=true;
                   console.log("3",this.status1,this.status2)
               }
           }
      }
      console.log(this.zhichi)
        // console.log(res.data.result);
    })
    }
}
}
</script>

<style>
.mycrowd{
    width: 1080px;
    margin: 30px auto;
}
/* .join_warp{
    margin-top: 30px;
} */
.join{
    margin-top: 30px;
     width: 100%;
    color: #444;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #e0e0e0;
}
.mycrowd tr,.mycrowd td{
        border: 1px solid #e0e0e0;
    text-align: center;
}
.mycrowd th{
    line-height: 38px;
    font-size: 14px;
    text-align: center;
    background: #f4f4f4;
}
.mycrowd td{
        padding: 10px;
    line-height: 22px;
    word-break: break-all;
}
.el-tabs__item.is-active,.el-tabs__item:hover {
    color: #333
}
.el-tabs__active-bar{
    
    background: #F18D00 !important;
}
.el-tabs__nav-scroll{
    height: 50px;
    line-height: 50px;
}
.wu{
    background: #f0f0f0;
}
.wu p{
    height: 400px;
    line-height: 400px;
    text-align: center;
    font-size:40px;
    font-weight: bold;
    color: #F18D00;
    letter-spacing: 20px;
}
img{
    width: 100%
}
.td{
    color: green;
}
.td1{
    cursor:pointer
}
.td1:hover,.up:hover{
    color:red;
}
.mycrowd h3,.chaya{
    margin-top: 30px;
}
.toolbar{
    margin-bottom: 30px;
}
</style>
